import Handle from '../utils/Handle'
import {Table, Tooltip, Space, Modal, message} from 'antd';
import React, {useState} from 'react';
import './List.less'
import {Button} from 'antd';
import {Link} from "react-router-dom";
import Footer from '../utils/Footer'
import http from "../../../utils/http";
import store from "../../../store/store";
import {ExclamationCircleOutlined} from "@ant-design/icons";

// rowSelection objects indicates the need for row selection
const {confirm} = Modal;

function List() {
    const ruku = (status, ids) => {
        http({
            url: 'api/goods/upGoods',
            method: "post",
            data: {
                ids,
                status
            }
        }).then((res => {
            if (res.code == 200) {
                message.success('上架成功！');
                getList(1, store.count, 10, 0, "", "", "", "")
            } else {
                message.error('上架失败！');
            }
        }))
    }
    const getList = (page, rank, size, typeLevel, moneyFrom, moneyTo, name, type) => {
        http({
            url: 'api/goods/goodsList',
            method: "post",
            params: {
                page, rank, size, typeLevel, moneyFrom, moneyTo, name, type
            }
        }).then((res => {
            console.log(res.data)
            setLength(res.total)
            res.data.forEach(item => {
                item.key = item.id
            })
            setData(res.data)
            store.setrukuData(res.data)
        }))
    }
    const [data, setData] = useState([])
    const [length, setLength] = useState(0)
    const [xiangqingData, setXiangqingData] = useState({});
    //选中的数据id，传给footer组件
    const [listId, setListId] = useState([]);
    const [selectionType, setSelectionType] = useState('checkbox');
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            // console.log(selectedRowKeys)
            setListId(selectedRowKeys)
        },
    };
    let shangjia = (id, status, index) => {
        console.log("当前商品id为：" + id + "状态：" + status)
        console.log(id)
        let st = 0
        if (status == 0) {
            st = 1
        }
        http({
            url: 'api/goods/updateStatus',
            method: "post",
            params: {
                id,
                status: st,
            }
        }).then((res => {
            if (res.code == 200) {
                message.success('上架成功！');
                getList(1, store.count, 10, 0, "", "", "", "")
            } else {
                message.error('上架失败！');
            }
        }))
        
        //    发送请求，发送商品id和状态，上架传1，下架传1
    }
    //需要传给详情组件的数据
    
    let xiangqing = (record) => {
        let xqdata = []
        xqdata.push(record)
        console.log(xqdata)
        store.setXiangqingData(xqdata)
    }
    const del = (id) => {
        http({
            url: 'api/goods/deleteGoods',
            method: "post",
            params: {
                id
            }
        }).then((res => {
            if (res.code == 200) {
                message.success('删除成功！');
                getList(1, store.count, 10, 0, "", "", "", "")
            } else {
                message.error('删除失败！');
            }
        }))
        //    发送请求。发送id后重新发送数据，获取新的数据重新渲染数据，获取新的数据时搜索状态不变
        //    更新data数据
    }
    const [columns] = useState(
        [
            {
                title: '商品ID',
                dataIndex: 'id',
                key: 'id',
                width: '7%',
                align: 'center',
                ellipsis: {
                    showTitle: false,
                },
                render: id => (
                    <Tooltip placement="topLeft" title={id}>
                        {id}
                    </Tooltip>),
            },
            {
                title: '商品图片',
                dataIndex: 'img',
                align: 'center',
                key: 'img',
                width: '10%',
                render: (img, record) => (
                    <img src={record.img} alt="" style={{width: 50, height: 50}}/>
                )
            },
            {
                title: '商品标题',
                dataIndex: 'name',
                key: 'name',
                align: 'center',
                width: '20%',
                ellipsis: {
                    showTitle: false,
                },
                render: name => (
                    <Tooltip placement="topLeft" title={name}>
                        {name}
                    </Tooltip>),
                // ellipsis: true,
            },
            {
                title: '所属分类',
                dataIndex: 'typeName',
                key: 'typeName',
                align: 'center',
                width: '9%',
            },
            {
                title: '在售价(元)',
                dataIndex: 'price',
                key: 'price',
                align: 'center',
                width: '9%',
            },
            {
                title: '预估收益(元)',
                dataIndex: 'profit',
                key: 'profit',
                align: 'center',
                width: '9%',
            },
            {
                title: '月销量(件)',
                dataIndex: 'salesNum',
                key: 'salesNum',
                align: 'center',
                width: '9%',
            },
            {
                title: '库存(件)',
                dataIndex: 'stockNum',
                key: 'stockNum',
                align: 'center',
                width: '9%',
                
            },
            {
                title: '操作',
                dataIndex: 'control',
                key: 'control',
                align: 'center',
                width: '21%',
                render: (text, record, index) => (
                    <Space size="small">
                        <Button
                            className='listBtn'
                            style={record.status ? {backgroundColor: "#c6c2ff"} : {backgroundColor: "#171c49"}}
                            onClick={() => {
                                shangjia(record.id, record.status)
                            }}
                        >{record.status ? "下架" : "上架"}</Button>
                        <Button
                            className='listBtn'
                            style={{backgroundColor: "#f56c6c"}}
                            onClick={() => {
                                deleteThis(record.id)
                            }}>删除</Button>
                        <Link to={"/home/list/xiangqing"}>
                            <Button className='listBtn' type="primary" onClick={() => {
                                xiangqing(record)
                            }}>详情</Button>
                        </Link>
                    </Space>
                ),
            },
        ],
    )
    const deleteThis = (id) => {
        confirm({
            title: '确认删除吗？',
            icon: <ExclamationCircleOutlined/>,
            // content: 'Some descriptions',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                del(id)
            },
            onCancel() {
                console.log('Cancel');
            },
        });
        //    将选中id发给后台，成功后重新请求数据渲染页面
    }
    return (
        <div id='GoodsList'>
            <Handle getChildData={getList}/>
            <div className='listList'>
                <div>
                    <Table
                        pagination={false}
                        rowSelection={{
                            type: selectionType,
                            ...rowSelection,
                        }}
                        columns={columns}
                        dataSource={data}
                    />
                </div>
            </div>
            <Footer
                setdataId={listId}
                getChildData={getList}
                datalength={length}
                text={"上架"}
                ruku={ruku}
            />
        </div>
    )
    
}

export default List